<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消订单</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .header {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        }
        .btn-primary {
            background-color: #ff4d4f;
            color: white;
            transition: all 0.3s;
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
        .btn-primary:hover {
            background-color: #ff7875;
        }
        .btn-outline {
            border: 1px solid #d9d9d9;
            transition: all 0.3s;
        }
        .btn-outline:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        .reason-item {
            transition: all 0.2s;
        }
        .reason-item:hover {
            background-color: #f5f5f5;
        }
        .reason-item.active {
            background-color: #e6f7ff;
            border-color: #1890ff;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header flex items-center justify-between px-4 py-3">
        <button class="text-gray-600" onclick="history.back()">
            <i class="fas fa-chevron-left text-lg"></i>
        </button>
        <h1 class="text-lg font-medium">取消订单</h1>
        <div class="w-6"></div> <!-- 占位保持对称 -->
    </div>

    <div class="px-4 py-3">
        <!-- 订单信息卡片 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <div class="flex justify-between items-center mb-3">
                <span class="text-gray-500">订单编号</span>
                <span class="font-medium" id="orderId">DD20240620001</span>
            </div>
            <div class="flex justify-between items-center mb-3">
                <span class="text-gray-500">服务名称</span>
                <span class="font-medium" id="serviceName">月嫂服务 - 26天</span>
            </div>
            <div class="flex justify-between items-center mb-3">
                <span class="text-gray-500">服务人员</span>
                <span class="font-medium" id="serviceProvider">张阿姨</span>
            </div>
            <div class="flex justify-between items-center mb-3">
                <span class="text-gray-500">服务时间</span>
                <span class="font-medium" id="serviceTime">2024-06-20 09:00</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-500">订单金额</span>
                <span class="text-red-500 font-medium" id="orderAmount">¥8,800.00</span>
            </div>
            <div class="mt-3 p-3 bg-yellow-50 rounded text-yellow-700 text-sm">
                <i class="fas fa-exclamation-circle mr-1"></i>
                取消订单可能会产生部分服务费扣除，具体扣费标准请查看取消政策
            </div>
        </div>

        <!-- 取消原因选择 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <h2 class="text-base font-medium mb-3">请选择取消原因</h2>
            
            <div class="mb-4">
                <label class="block text-gray-700 text-sm mb-2">主要原因</label>
                <select class="w-full p-3 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
                    <option value="">请选择取消原因</option>
                    <option value="time">时间冲突</option>
                    <option value="price">价格原因</option>
                    <option value="better">找到更好服务</option>
                    <option value="plan">计划有变</option>
                    <option value="other">其他原因</option>
                </select>
            </div>
            
            <div>
                <label class="block text-gray-700 text-sm mb-2">其他说明（选填）</label>
                <textarea 
                    class="w-full p-3 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500" 
                    rows="3" 
                    placeholder="请简要说明取消原因（200字以内）"
                    maxlength="200"
                ></textarea>
                <div class="text-right text-xs text-gray-500 mt-1">0/200</div>
            </div>
        </div>

        <!-- 取消后果提示 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <h3 class="text-base font-medium mb-3 text-gray-800">取消说明</h3>
            <div class="flex items-start mb-3">
                <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                <div>
                    <p class="text-sm text-gray-700">订单处于"待签合同"状态，取消订单将在1-3个工作日内全额退款至原支付账户</p>
                </div>
            </div>
            <div class="flex items-start mb-3">
                <i class="fas fa-clock text-green-500 mt-1 mr-2"></i>
                <div>
                    <p class="text-sm text-gray-700">此状态下取消订单不收取任何手续费</p>
                </div>
            </div>
            <div class="flex items-start">
                <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
                <div>
                    <p class="text-sm text-gray-700">本月取消超过3单将影响您的信用评级，请谨慎操作</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-md" style="max-width: 750px; margin: 0 auto; bottom: 88rpx;">
        <div class="flex space-x-3">
            <button class="btn-outline flex-1 py-3 rounded-lg font-medium">
                返回订单
            </button>
            <button class="btn-primary flex-1 py-3 rounded-lg font-medium">
                确认取消
            </button>
        </div>
        <div class="mt-3 text-center">
            <a href="#" class="text-blue-500 text-sm">查看取消政策</a>
        </div>
    </div>

    <!-- 底部导航 -->

    <script>
        // 模拟订单数据
        const orderData = {
            'DD20240620001': {
                serviceName: '月嫂服务 - 26天',
                serviceProvider: '张阿姨',
                serviceTime: '2024-06-20 09:00',
                amount: '¥8,800.00'
            },
            'DD20240515123456': {
                serviceName: '深度保洁 - 4小时',
                serviceProvider: '王阿姨',
                serviceTime: '2024-05-15 10:00',
                amount: '¥298.00'
            }
        };

        // 页面加载时获取订单信息
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const orderId = urlParams.get('orderId');
            
            if (orderId && orderData[orderId]) {
                const order = orderData[orderId];
                document.getElementById('orderId').textContent = orderId;
                document.getElementById('serviceName').textContent = order.serviceName;
                document.getElementById('serviceProvider').textContent = order.serviceProvider;
                document.getElementById('serviceTime').textContent = order.serviceTime;
                document.getElementById('orderAmount').textContent = order.amount;
            }
        });

        // 文本输入计数
        document.querySelector('textarea').addEventListener('input', function() {
            const count = this.value.length;
            document.querySelector('.text-right').textContent = `${count}/200`;
        });

        // 确认取消按钮点击事件
        document.querySelector('.btn-primary').addEventListener('click', function() {
            const reason = document.querySelector('select').value;
            if (!reason) {
                alert('请选择取消原因');
                return;
            }
            
            // 显示确认对话框
            if (confirm('确定要取消此订单吗？取消后将无法恢复。')) {
                // 这里应该是提交取消请求的逻辑
                alert('订单取消申请已提交，我们将在1-3个工作日内处理退款');
                // 实际应用中应该跳转回订单列表页面
                window.location.href = 'order-list.html';
            }
        });

        // 返回订单按钮点击事件
        document.querySelector('.btn-outline').addEventListener('click', function() {
            window.location.href = 'order-list.html';
        });
    </script>
</body>
</html>